<template>
	<div class="pages">
		<div>
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="平台介绍" name="ptjs">
					<div class="item_editor">
						<quill-editor v-model="dataForm.content" ref="editorRef" :options="editorOption"
							class="editor" />
						<div class="item_button">
							<el-button type="primary" size="small" @click="submit('content')">保存</el-button>
						</div>
					</div>

				</el-tab-pane>
				<el-tab-pane label="用户协议" name="yhxy">
					<div class="item_editor">
						<quill-editor class='editor' ref="editorRef" v-model="dataForm.agree"
							:options="editorOption"></quill-editor>
						<div class="item_button">
							<el-button type="primary" size="small" @click="submit('agree')">保存</el-button>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="隐私政策" name="yszc">
					<div class="item_editor"><quill-editor class='editor' ref="editorRef" v-model="dataForm.privacy"
							:options="editorOption"></quill-editor>
						<div class="item_button">
							<el-button type="primary" size="small" @click="submit('privacy')">保存</el-button>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="企业端使用流程" name="qydsylc">
					<div class="item_editor"><quill-editor class='editor' ref="editorRef" v-model="dataForm.corp_flow"
							:options="editorOption"></quill-editor>
						<div class="item_button">
							<el-button type="primary" size="small" @click="submit('corp_flow')">保存</el-button>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="工厂端使用流程" name="gcdyhxy">
					<div class="item_editor"><quill-editor class='editor' ref="editorRef"
							v-model="dataForm.factory_flow" :options="editorOption"></quill-editor>
						<div class="item_button">
							<el-button type="primary" size="small" @click="submit('factory_flow')">保存</el-button>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>

		</div>
	</div>
</template>

<script>
	import {
		quillEditor,
		Quill
	} from 'vue-quill-editor'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import "../../assets/css/quillEditor.css";
	var fonts = [
		"SimSun",
		"SimHei",
		"Microsoft-YaHei",
		"KaiTi",
		"FangSong",
		"Arial",
		"Times-New-Roman",
		"sans-serif",
	];
	// 自定义字号的大小
	var sizes = [false, "16px", "18px", "20px", "22px", "26px", "28px", "30px"];
	var Size = Quill.import("formats/size");
	Size.whitelist = sizes;
	var Font = Quill.import("formats/font");
	Font.whitelist = fonts; //将字体加入到白名单
	Quill.register(Font, true);

	const toolbarOptions = [
		["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
		["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
		[{
			list: "ordered"
		}, {
			list: "bullet"
		}], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
		[{
			script: "sub"
		}, {
			script: "super"
		}], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
		[{
			indent: "-1"
		}, {
			indent: "+1"
		}],
		[{
			size: sizes
		}], // 配置字号
		[{
			header: [1, 2, 3, 4, 5, 6, false]
		}], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
		[{
			color: []
		}, {
			background: []
		}], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
		[{
			font: fonts
		}], //显示字体选择
		[{
			align: []
		}], // 对齐方式-----[{ align: [] }]
		["clean"], // 清除文本格式-----['clean']
		['link', 'image', 'video'], // 链接、图片、视频-----
	];
	export default {
		data() {
			return {
				activeName: 'ptjs',
				editorOption: {
					theme: "snow",
					placeholder: "",
					modules: {
						toolbar: toolbarOptions,
					},
				},
				dataForm: {
					agree: '',
					privacy: '',
					content: '',
					corp_flow: '',
					factory_flow: '',
				}
			}
		},
		components: {
			quillEditor
		},
		methods: {
			handleClick() {

			},
			onEditorReady() {},
			onEditorBlur() {},
			onEditorFocus() {},
			onEditorChange({
				html
			}) {},
			submit(data) {
				this.dataForm.is_post=1
				// let obj = {
				// 	[data]: this.dataForm[data],
				// 	is_post:1
				// };
				this.$loading()
				this.$http.post('/api/settings/detail', this.dataForm).then(res => {
					this.$closeLoading()
					this.$message({
						message: res.msg,
						type: 'success',
						duration: 1000,
						onClose: () => {
							this.getInfo()
						}
					});
				})
			},
			getInfo() {
				this.$loading()
				this.$http.post('/api/settings/detail', {}).then(res => {
						this.$closeLoading()
					this.dataForm = {
						...this.dataForm,
						...res.result
					}
				})
			}
		},
		created() {
			this.getInfo()
		},
		computed: {
			//当前富文本实例
			editor() {
				return this.$refs.editorRef.quillEditor;
			},
		},
	}
</script>

<style scoped lang="scss">
	.quill-editor /deep/ .ql-container {
		min-height: 500px;
	}

	.ql-editor {
		height: 100%;
	}

	.item_editor {
		margin-top: 20px;
		padding: 0 20px;
	}

	.item_button {
		text-align: right;
		margin-top: 25px;
	}
</style>